<template>
	<el-dialog v-model="dialogVisible" title="新建设备" width="500" :before-close="hideModal">
		<div>
			<el-form ref="formRef" :model="form" label-width="auto">
				<el-form-item label="账号：" prop="name">
					<el-select v-model="form.accout" placeholder="请选择">
						<el-option :label="item.account" :value="item.account" v-for="(item, index) in tableData.data" :key="index" />
					</el-select>
				</el-form-item>

				<el-form-item label="注册码" prop="name">
					<el-input v-model="form.registerCode" placeholder="请输入" disabled />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="hideModal">取消</el-button>
				<el-button type="primary" @click="submit"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { getUserList, deviceAdd } from '/@/api/api';
import { v4 as uuidv4 } from 'uuid';

const emit = defineEmits(['handleClose']);

const tableData = reactive({});
const form = ref({});
const dialogVisible = ref(false);

async function submit() {
	let { code, data } = await deviceAdd({
		...form.value,
	});
	if (code == 200) {
		hideModal();
	}
}

async function getData() {
	let { code, data } = await getUserList({
		page: 1,
		pageSize: 10000,
	});
	if (code == 200) {
		tableData.data = data.list;
		console.log('tableData', tableData);
	}
}

function showModal(item) {
	dialogVisible.value = true;
	form.value.registerCode = uuidv4();

	getData();
}

function hideModal() {
	for (let obj in form.value) {
		form.value[obj] = null;
	}

	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss"></style>
